<template>
  <div class="tabcontrol">
    <div v-for="(item,index) of titles" class="tab-item" :class="curIdx==index?'active':' '" @click="itemclick(index)" :key="item.id">
      <span>{{item.title}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      curIdx: 0,
      titles: [
        {
          id: 3,
          title: '流行'
        },
        {
          id: 5,
          title: '热销'
        },
        {
          id: 9,
          title: '上新'
        }
      ]
    }
  },
  methods: {
    itemclick(index) {
      this.curIdx = index
      this.$emit('tabClick', index)
    }
  }
}
</script>
<style scoped>
.tabcontrol {
  display: flex;
  text-align: center;
  line-height: 40px;
  height: 40px;
  background-color: #fff;
}
.tab-item {
  flex: auto;
}
.tab-item span {
  padding: 5px;
}
.active span {
  color: var(--color-tint);
  border-bottom: 3px solid var(--color-tint);
}
</style>
